<template>
    <div>
      <el-select  v-model="supplierName" clearable placeholder="请选择供应商"
                  @change="changeSupp" @clear="clearSupp" filterable @focus="getSuppierList" value-key="id" :filter-method="querySuppier">
        <el-option v-for="item in suppierIdOptions" :key="item.id" :label="item.name" :value="item" >
          <div style="display: flex">
            <span style="float: left;width: 80px;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
            <span style="width: 100px;overflow: hidden;text-overflow: ellipsis;">{{ item.phone }}</span>
            <div style="width: 200px;">
              <span style="color: #8492a6; font-size: 8px;">{{item.areaName}}{{item.address}}</span>
            </div>
          </div>
        </el-option>
        <div style="display: flex;width: 100%;position: absolute;bottom: 0">
          <div style="width: 50%;background-color: rgb(248,248,248);"></div>
          <div class="elOption" @click="toSearchSupplier">搜索供应商</div>
        </div>
        <div style="height: 30px"></div>
      </el-select>
      <el-dialog
        title="查找供应商"
        :visible.sync="supplierVisible"
        width="950px"
        v-el-drag-dialog
        append-to-body
        :before-close="supplierClose">
        <div style="position: relative;height: 63vh;overflow: auto">
          <supplierTable  @doubleSupplier="doubleSupplier"></supplierTable>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import supplierTable from '../SupplierTable/supplierList'
  import utils from '../../utils/utils.js'
  import { list as supplierList } from '@/api/supplier'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  export default {
    name: 'querySupplier',
    data(){
      return{
        supplierName:'',
        suppierIdOptions:[],
        query:{
          supplierId:'',
        },
        supplierVisible:false,
      }
    },
    components:{supplierTable},
    directives: {
      elDragDialog
    },
    methods:{
      doubleSupplier(data){
        this.supplierName=data.name
        this.query.supplierId=data.id
        this.supplierVisible=false
        this.$emit('querySupplierClick', this.query)
      },
      supplierClose(){
        this.supplierVisible=false
      },
      changeSupp(data){
        this.supplierName=data.name
        this.query.supplierId=data.id
        var _this = this
        if(!utils.isNull(data)){
          this.query.supplierId = data.id
        }else{
          this.query.supplierId = ''
        }
        this.$emit('querySupplierClick', this.query)
      },
      clearSupp(){

        if (utils.isNull(this.query.supplierId)){
          this.query.supplierId=''
        }

      },
      querySuppier (query) { // 查询供应商
        this.suppierIdOptions = []
        supplierList({name: query}).then(res => {
          res.data.data.forEach((option, index) => {
            this.$set(this.suppierIdOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      getSuppierList (data) { // 加载供应商
        console.log(data)
        supplierList().then(res => {
          res.data.data.forEach((option, index) => {
            this.$set(this.suppierIdOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      toSearchSupplier(){
        this.supplierVisible=true
      },
    }
  }
</script>

<style scoped>
  .elOption{
    background-color: #909399;
    color:white ;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }
</style>
